<script setup>
import { reactive, ref, onMounted } from "vue";
import { getAllUserInfo } from "~/api";
import { useRouter } from "vue-router";
import { getStorage } from "@/utils";

const formData = reactive({
    pageNum: 0,
    pageSize: 20,
    orderType: 1,
    address: "",
    total: 0,
    status: "",
    team: "",
});
const isAddress = getStorage("isAddress");
const loading = ref(false);
const list = ref([]);
const Sum = ref({});
const onSubmit = async () => {
    loading.value = true;
    try {
        const res = await getAllUserInfo(formData);
        console.log(res);
        list.value = res.data.data.UserList;
        formData.total = res.data.data.Total;
        Sum.value = res.data.data;
    } catch (error) {}
    loading.value = false;
};
const handleSizeChange = (val) => {
    formData.pageSize = val;
    formData.pageNum = 0;
    onSubmit();
};
const handleCurrentChange = (val) => {
    formData.pageNum = val - 1;
    onSubmit();
};
onMounted(() => {
    onSubmit();
});
</script>
<template>
    <div>
        <el-form ref="form" :model="formData" label-width="80px" :inline="true">
            <el-form-item label="排序">
                <el-select v-model="formData.orderType" placeholder="请选择" @change="onSubmit">
                    <el-option label="顺序" :value="0"> </el-option>
                    <el-option label="倒序" :value="1"> </el-option>
                    <el-option label="HF升序" :value="2"> </el-option>
                    <el-option label="HF降序" :value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="formData.status" placeholder="请选择" @change="onSubmit">
                    <el-option label="全部" value=""> </el-option>
                    <el-option label="工作室" :value="1"> </el-option>
                    <el-option label="领导人" :value="2"> </el-option>
                    <el-option label="禁止提币" :value="3"> </el-option>
                    <el-option label="自动提币" :value="4"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="formData.address" placeholder="请输入地址" style="width: 360px"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="formData.team" placeholder="请选择" @change="onSubmit">
                    <el-option label="单个" :value="0"> </el-option>
                    <el-option label="团队" :value="1"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="total">USDT <span>{{ Sum.SumUSDT }} </span>USDH <span>{{ Sum.SumUSDH }} </span>USDF <span>{{ Sum.SumUSDF
        }} </span>HF <span>{{ Sum.SumHF }} </span>HF2 <span>{{ Sum.SumHF2}}</span> NFTV <span>{{ Sum.SumNFTV }} </span></div>
        <el-table ref="multipleTable" :data="list" v-loading="loading">
            <el-table-column prop="Id" width="80" label="#"> </el-table-column>
            <el-table-column prop="Address" label="用户地址" width="200">
            </el-table-column>
            <el-table-column prop="Upline" label="上级地址" width="200">
            </el-table-column>
            <el-table-column prop="USDT" label="USDT" width="110"> </el-table-column>
            <el-table-column prop="USDH" label="USDH" width="110"> </el-table-column>
            <el-table-column prop="USDF" label="USDF" width="110"> </el-table-column>
            <el-table-column prop="HF" label="HF" width="110"> </el-table-column>
            <el-table-column prop="HF2" label="HF2" width="110"> </el-table-column>
            <el-table-column prop="NFTV" label="贡献值" width="110"> </el-table-column>
            <el-table-column prop="TotalInvest1" label="当前预赛" width="110"> </el-table-column>
            <el-table-column prop="TotalInvest2" label="当前半决赛" width="110"> </el-table-column>
            <el-table-column prop="TotalInvest3" label="当前决赛" width="110"> </el-table-column>
            <el-table-column prop="TotalInvest4" label="当前总决赛" width="110"> </el-table-column>
            <el-table-column prop="DownlineInvest1" label="社区预赛" width="110">
            </el-table-column>
            <el-table-column prop="DownlineInvest2" label="社区半决赛" width="110">
            </el-table-column>
            <el-table-column prop="DownlineInvest3" label="社区决赛" width="110">
            </el-table-column>
            <el-table-column prop="DownlineInvest4" label="社区总决赛" width="110">
            </el-table-column>
            <el-table-column prop="Auto15" label="半决赛自动复利" width="160">
                <template #default="scope">
                    {{ ['不是', '是'][scope.row.Auto15] }}
                </template>
            </el-table-column>
            <el-table-column prop="Auto30" label="决赛自动复利" width="160">
                <template #default="scope">
                    {{ ['不是', '是'][scope.row.Auto30] }}
                </template>
            </el-table-column>
            <el-table-column prop="Auto90" label="总决赛自动复利" width="160">
                <template #default="scope">
                    {{ ['不是', '是'][scope.row.Auto90] }}
                </template>
            </el-table-column>
            <el-table-column prop="Status" label="权限" width="110">
                <template #default="scope">
                    {{ ['允许', '不允许', '自动'][scope.row.Status] }}
                </template>
            </el-table-column>
            <el-table-column prop="UserLevel" label="用户等级" width="110"></el-table-column>
            <el-table-column prop="Rate1" label="rate1" width="110"></el-table-column>
            <el-table-column prop="Rate2" label="rate2" width="110"></el-table-column>
            <el-table-column prop="Rate3" label="rate3" width="110"></el-table-column>
            <el-table-column prop="Rate4" label="rate4" width="110"></el-table-column>
            <el-table-column prop="Rate5" label="rate5" width="110"></el-table-column>
            <el-table-column prop="DirectCount" label="有效直推" width="110"></el-table-column>
            <el-table-column prop="DownlineCount" label="社区成员" width="110">
            </el-table-column>
            <el-table-column prop="Workroom" label="工作室" width="110">
                <template #default="scope">
                    {{ ['不是', '是'][scope.row.Workroom] }}
                </template>
            </el-table-column>
            <el-table-column prop="Leader" label="领导人" width="110">
                <template #default="scope">
                    {{ ['不是领导人', '是领导人'][scope.row.Leader] }}
                </template>
            </el-table-column>
            <el-table-column prop="AdminId" label="所属团队" width="110">
            </el-table-column>
            <el-table-column prop="NodeOpen" label="节点开关" width="110">
                <template #default="scope">
                    {{ ['关闭', '打开'][scope.row.NodeOpen] }}
                </template>
            </el-table-column>
            <el-table-column prop="TransOpen" label="转账白名单" width="110">
                <template #default="scope">
                    {{ ['关闭', '打开'][scope.row.NodeOpen] }}
                </template>
            </el-table-column>
            <el-table-column prop="SendAmount" label="每日提币数量" width="110">
            </el-table-column>
            <el-table-column prop="SendCount" label="每日提币次数" width="110">
            </el-table-column>
            <el-table-column prop="CreatedAt" label="注册时间" min-width="160">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="$refs.direct.show(scope.row)">直推</el-button>
                    <el-button type="danger" size="small" @click="$refs.status.show(scope.row)">权限</el-button>
                    <el-button type="success" size="small" @click="$refs.leader.show(scope.row)">领导人</el-button>
                    <el-button type="success" size="small" @click="$refs.balance.show(scope.row)" v-if="isAddress">加余额</el-button>
                    <el-button type="warning" size="small" @click="$refs.workroom.show(scope.row)">工作室</el-button>
                    <el-button type="primary" size="small" @click="$refs.rate.show(scope.row)">比例</el-button>
                    <el-button type="warning" size="small" @click="$refs.admin.show(scope.row)">团队标记</el-button>
                    <el-button type="success" size="small" @click="$refs.openSend.show(scope.row)">开关和提币</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="formData.pageSize" :total="formData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
        <direct-list ref="direct" />
        <set-user-workroom ref="workroom" @onSubmit="onSubmit" />
        <set-user-leader ref="leader" @onSubmit="onSubmit" />
        <user-status ref="status" @onSubmit="onSubmit" />
        <add-balance ref="balance" @onSubmit="onSubmit" v-if="isAddress" />
        <set-user-rate ref="rate" @onSubmit="onSubmit" />
        <set-user-admin ref="admin" @onSubmit="onSubmit" />
        <set-user-open-send ref="openSend" @onSubmit="onSubmit" />

    </div>
</template>
<style lang="scss" scoped>
.el-pagination {
    padding: 15px;
    float: right;
}

.total {
    padding: 10px 0;
    font-size: 16px;

    span {
        margin-right: 15px;
        color: rgb(245, 108, 108);
    }
}

.el-table {
    .el-button {
        margin: 0 10px 10px 0 !important;
    }

    .el-button + .el-button {
        margin: 0 10px 10px 0 !important;
    }
}
</style>